<template>
  <div class="detail-params" v-if="attribute.length !== 0">
    <div class="top">商品参数</div>
    <div class="content">
      <div class="main">
        <div class="main-item" v-for="(item, index) in attribute" :key="index">
          <span class="title">{{ item.name }}</span>
          <span class="desc">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailParams",
  props: {
    attribute: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-params {
  background-color: #fff;
  padding: 10px;
}
.top {
  font-size: 22px;
  padding: 10px 0;
}
.content {
  width: 100%;
  .main {
    margin: 20px 0;
   
    margin: 10px 0;
    .main-item {
      display: flex;
      margin: 10px 0;
       background-color: #f4f4f4;
      .title {
        width: 67px;
        padding: 10px 5px;
        color: #aaaaaa;
      }
      .desc {
        flex: 1;
        // display: flex;
        // align-items: center;
        line-height: 36px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
}
</style>